<template>
	<view>
		<view>
			<view style="display: flex;flex-direction: row;">
				<view style="width: 10%;">起止日期</view>
				<uni-datetime-picker type="daterange" v-model="timestamp" return-type="timestamp" :end="defaultEndTime"
					@change="dateChange"></uni-datetime-picker>
			</view>
			<view style="height: 50rpx;"></view>
			<button @click="select" type="primary">查询</button>
		</view>
		<view style="height: 50rpx;"></view>
		<view v-if="showChart">
			<view class="charts-box">
				<qiun-title-bar title="工单申报数" />
				<qiun-data-charts type="pie" :chartData="chartData1" />
			</view>
			<view class="charts-box">
				<qiun-title-bar title="工单完成数" />
				<qiun-data-charts type="pie" :chartData="chartData2" />
			</view>
			<view class="charts-box">
				<qiun-title-bar title="工单完成率" />
				<qiun-data-charts type="column" :chartData="chartData3" />
			</view>
			<view>
				<qiun-title-bar title="表格一览" />
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">维修类别</uni-th>
						<uni-th align="center">申报数</uni-th>
						<uni-th align="center">完成数</uni-th>
						<uni-th align="center">完成率</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in tableData">
						<uni-td>{{item.type}}</uni-td>
						<uni-td>{{item.acceptnum}}</uni-td>
						<uni-td>{{item.completenum}}</uni-td>
						<uni-td>{{item.percentage}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showChart: false,
				timestamp: null,
				selectStartTime: null,
				selectEndTime: null,
				defaultStartTime: null,
				defaultEndTime: null,
				tableData: null,
				chartData1: {
					series: [{
						data: []
					}]
				},
				chartData2: {
					series: [{
						data: []
					}]
				},
				chartData3: {
					categories: [],
					series: [{
						name: '工单完成率',
						data: []
					}]
				}
			}
		},
		methods: {
			select() {
				if (this.selectStartTime == null || this.selectEndTime == null) {
					uni.showToast({
						title: "请选择起止日期",
						icon: "none"
					})
				} else {
					const that = this
					uni.showLoading({});
					var token = getApp().globalData.token
					that.chartData1.series[0].data = []
					that.chartData2.series[0].data = []
					that.chartData3.categories = []
					that.chartData3.series[0].data = []
					uni.request({
						url: getApp().globalData.BASE_URL + '/admin/orderStatistical',
						data: {
							token: token,
							startTime: that.selectStartTime,
							endTime: that.selectEndTime,
						},
						header: {},
						success(response) {
							console.log(response)
							uni.hideLoading()
							if (response.data.status === 444) {
								uni.showToast({
									title: '您的登录信息已过期，请重新登录',
									duration: 2000,
									icon: "none",
									success() {
										setTimeout(function() {
											uni.reLaunch({
												url: "/pages/login/login",
											})
										}, 2000)
									}
								});
							} else if (response.data.status === 445) {
								uni.showToast({
									title: '您没有此操作权限',
									duration: 2000,
									icon: "none"
								});
							} else {
								that.showChart = true
								that.tableData = response.data.orderStatisticalsGroupByType
								for (var i = 0; i < response.data.orderStatisticalsGroupByType.length; i++) {
									var tmp1 = {
										value: response.data.orderStatisticalsGroupByType[i].acceptnum,
										name: response.data.orderStatisticalsGroupByType[i].type
									}
									var tmp2 = {
										value: response.data.orderStatisticalsGroupByType[i].completenum,
										name: response.data.orderStatisticalsGroupByType[i].type
									}
									var tmp3 = {
										value: parseFloat(response.data.orderStatisticalsGroupByType[i]
											.percentage.split("%")[0]),
										name: response.data.orderStatisticalsGroupByType[i].type
									}
									that.chartData1.series[0].data.push(tmp1)
									that.chartData2.series[0].data.push(tmp2)
									that.chartData3.categories.push(tmp3.name)
									that.chartData3.series[0].data.push(tmp3.value)
								}
								that.chartData1.series[0].data.pop()
								that.chartData2.series[0].data.pop()
								that.chartData3.categories.pop()
								that.chartData3.series[0].data.pop()
							}
						}
					})
				}
			},
			dateChange(e) {
				console.log(e)
				this.selectStartTime = e[0]
				this.selectEndTime = e[1] + 86400000 - 1
				this.timestamp = [this.selectStartTime,this.selectEndTime]
				console.log(this.selectStartTime)
				console.log(this.selectEndTime)
			},
		},
		created() {
			//默认统计一月工单
			this.defaultEndTime = new Date(new Date().toLocaleDateString()).getTime()
			this.selectEndTime = this.defaultEndTime + 86400000 - 1
			this.selectStartTime = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 30
			this.timestamp = [this.selectStartTime,this.selectEndTime]
			
			this.select()
		}
	}
</script>

<style>

</style>
